<script setup lang='ts'>
import {onBeforeMount, ref} from 'vue'
import {ElMessage} from 'element-plus'
import Jsencrypt from 'jsencrypt'
import {getPublicKey, login} from '@/api/login'
import {IconConfig} from '@/api/config'
import {BASE_TITLE} from '@/store/config'
import {HOMENAME} from '@/router/static'
import router from '@/router/index'
import useUser from '@/store/user'
import useNav from '@/store/nav'

import userLogin from './userLogin.vue'
import dIcon from '@/components/dIcon.vue'

import centerBg from '@/assets/image/login/centerBg.png'
const userStore = useUser.setup().store
const encrypt = new Jsencrypt()
const loading = ref(false)

const loginLogo:IconConfig = {icon:'login-bg-logo', type:'custom'}

const onLoginComplete = (token:string) => {
  userStore.refreshToken(token)
  // debugger
  router.push({name:HOMENAME})
  ElMessage.success('登录成功')
}
//获取密码
const getPassword = (publicKey:string, _password:string):Promise<string> => {
  return new Promise((resolve, reject) => {
    encrypt.setPublicKey(publicKey)
    const password = encrypt.encrypt(_password)
    if (password) {
      resolve(password)
    } else {
      reject('加密失败')
    }
  })
}

/**
 * @description:
 * @param {string} _userName 原始用户名
 * @param {string} _password 原始密码
 */
const onLogin = (_userName:string, _password:string) => {
  loading.value = true
  login({phone:_userName, password:_password}).then((res) => {
    console.log('登录123', res)
    const tokendata = res.data.data as any
    onLoginComplete(tokendata.token)
    loading.value = false
  }).catch((error) => {
    console.log('登录456')
    console.warn(error)
    loading.value = false
  })
}

//只要回到登录界面就删除token
onBeforeMount(() => {
  document.title = '登录' + '-' + BASE_TITLE
  useUser.setup().reset()
  useNav.setup().reset()
  userStore.deleteToken()
})
</script>

<template>
  <div class="login-container d-common-flex-col">
    <!-- <d-icon class="login-logo" :icon-config="loginLogo" /> -->
    <div class="login-top-content">
      <div class="login-top" />
    </div>
    <div class="login-main-content d-common-flex-full d-common-flex-center">
      <main class="login-main__wapper d-common-flex-row">
        <img :src="centerBg" class="login-center">
        <div class="login-main-con d-common-flex-col d-common-flex-center">
          <section class="login-main-title d-common-title-base d-common-title-third-2">
            {{ BASE_TITLE }}
          </section>
          <user-login class="login-userlogin" :loading="loading" @login="onLogin" />
        </div>
      </main>
    </div>
    <div class="login-bottom-content">
      <div class="login-bottom" />
    </div>
    <footer class="login-footer d-common-text-main login-footer-font">
      <!-- 提供技术支持 -->
    </footer>
  </div>
</template>

<style scoped lang="less">
.login-container {
    --login-footer-bottom:30px;
    --login-footer-font-color:#0D111A;
    --login-footer-font-size:var(--el-font-size-base);
    height: 100vh;
    width: 100%;
    background-color:#B2E0E4;
    position: relative;
  }
  .login-top-content{
    height: 20%;
    .login-top{
      height: 100%;
      background-size: 100% 100%;
      background-image: url('/src/assets/image/login/topBg.png');
    }
  }
  .login-main-content{
    .login-main__wapper{
      width:60%;
      min-width: 720px;
      max-width: 1280px;
      .login-center{
        width: 47%;
        height: auto;
      }
      .login-main-con{
        width: 53%;
        box-sizing: border-box;
        background-color: var(--d-color-white);
        border-radius:0 16px 16px 0;
        .login-main-title{
          text-align: center;
          margin-bottom: var(--d-margin-level-11);
          color: var(--d-font-color-black);
          font-size: 31px;
        }
      }
    }
  }
  .login-bottom-content{
    height: 20%;
  }
  .login-bottom{
    height: 100%;
    background-size: 100% 100%;
    background-image: url('/src/assets/image/login/bottomBg.png');
  }
  .login-logo{
    position: absolute;
    left: 2%;
    top: 2%;
    width: 130px !important;
    height: 97px !important;
  }
  .login-userlogin{
    width: 45%;
    min-width: 280px;
  }
.login-footer{
  position: absolute;
  bottom: var(--login-footer-bottom);
  display: flex;
  justify-content: center;
  width: 100%;
}
.login-footer-font{
  color: var(--login-footer-font-color);
  font-size: var(--login-footer-font-size);
}
:deep(.el-dialog__body){
  border-top: 1px solid #E8EAEC;
}
</style>